<template>
    <div class="webgl-container">
        <div id="webglDom" ref="webglDom"></div>
    </div>
</template>

<script>
// 引入threejs核心模块
import * as THREE from 'three';
// 引入OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// //长方体 参数：长，宽，高
// var geometry = new THREE.BoxGeometry(100, 100, 100);
// // 球体 参数：半径60  经纬度细分数40,40
// var geometry = new THREE.SphereGeometry(60, 40, 40);
// // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
// var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
// // 正八面体
// var geometry = new THREE.OctahedronGeometry(50);
// // 正十二面体
// var geometry = new THREE.DodecahedronGeometry(50);
// // 正二十面体
// var geometry = new THREE.IcosahedronGeometry(50);
export default {
    name: 'ThreePage',
    data() {
        return {
            scene: null,
            camera: null,
            renderer: null,
            textloader: null,
            width: 0,
            height: 0,
            clickStyle: {
                top: '10px',
                left: '50px',
            },
            isShow: false,
        };
    },
    watch: {
        skyType() {
            this.addSkeyBox();
        },
    },
    mounted() {
        this.$nextTick(this.init);
        window.addEventListener('click', this.onMouseClick, false);
    },
    methods: {
        onMouseClick(event) {},
        init() {
            // 初始化画布宽高
            const container = this.$refs.webglDom;
            this.width = container.offsetWidth;
            this.height = container.offsetHeight;

            // 场景
            this.scene = new THREE.Scene();
            this.scene.fog = new THREE.Fog(0x005577, 1, 2800);
            this.textloader = new THREE.TextureLoader();

            // 相机
            this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.01, 10000);
            this.camera.position.set(720, 720, 720);
            this.add(this.camera);
            this.camera.lookAt(this.scene.position);

            // 坐标系
            let axisHelper = new THREE.AxesHelper(1000);
            this.add(axisHelper);
            //平面
            const path = 'css/images/pisa/';
            const format = '.png';
            let urls = [];
            const textureCube = new THREE.CubeTextureLoader().load(urls);
            this.scene.background = textureCube;
            const geometry = new THREE.SphereGeometry(0.1, 32, 16);
            const material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube });
            let spheres = [
                '',
                '',
                '',
                '',
                '',
                '',
            ];
            for (let i = 0; i < 500; i++) {
                const mesh = new THREE.Mesh(geometry, material);

                mesh.position.x = Math.random() * 10 - 5;
                mesh.position.y = Math.random() * 10 - 5;
                mesh.position.z = Math.random() * 10 - 5;

                mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

                this.scene.add(mesh);

                spheres.push(mesh);
            }
            // 添加灯光
            this.addLight();
            // 初始化一个加载器
            // 渲染器
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
            });
            this.renderer.setClearColor(new THREE.Color('#000000'), 1);
            this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            this.renderer.setSize(this.width, this.height);
            document.getElementById('webglDom').appendChild(this.renderer.domElement);

            // OrbitControls
            new OrbitControls(this.camera, this.renderer.domElement);
            this.render();
        },
        addLight() {
            // 环境光
            const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
            this.add(light);

            // // 平行光源
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(200, 600, 200);
            this.add(directionalLight);
        },
        add(obj) {
            this.scene.add(obj);
        },
        render() {
            this.renderer.render(this.scene, this.camera);
            requestAnimationFrame(this.render);
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#webglDom,
.webgl-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 2px;
}
.clickClass {
    position: fixed;
    color: aliceblue;
    padding: 40px;
    width: 400px;
    height: 250px;
    /* background-color: rgba(72, 67, 67, 0.56); */
    background-image: url('http://gaohuacloud.com/prod-api/profile/avatar/2022/07/22/panelThree_20220722104950A023.png');
    background-size: cover;
}
</style>
